<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style></style>
    <script src="../../dist/vue.js"></script>
  </head>
  <body>
    <script>
      let Son = Vue.extend({
        data() {
          return {
            name: { firstName: "Jerry" },
            title: "Back-end father",
            father: "I am father",
          };
        },
        computed: {
          fullName() {
            return this.firstName + this.lastName;
          },
        },
        methods: {
          hello() {
            console.info("hello from parent");
          },
          fatherFunc() {
            console.info("father function");
          },
        },
        // watch: {
        //   name() {
        //     console.info("name changed detected in parent");
        //   },
        // },
        watch: {
          name: [
            function () {
              console.info("name changed parent-01");
            },
            function () {
              console.info("name changed parent-02");
            },
          ],
        },
        created() {
          console.info("created in father");
        },
      });

      let son = new Son({
        data() {
          return {
            name: { lastName: "Yuan" },
            title: "Front-end son",
            father: "I am son",
          };
        },
        methods: {
          hello() {
            console.info("hello from son");
          },
          sonFunc() {
            console.info("son function");
          },
        },
        computed: {
          fullName() {
            return this.name.lastName + this.name.firstName;
          },
        },
        // watch: {
        //   name() {
        //     console.info("name changed detected in son");
        //   },
        // },
        watch: {
          name: [
            function () {
              console.info("name changed son-01");
            },
            function () {
              console.info("name chaned son-02");
            },
          ],
        },
        created() {
          console.info("created in son");
        },
      });
      //data 返回的是一个函数，子类覆盖父类
      //methods computed props inject   el子类覆盖父类
      //component directive filter 父类为原型，子类进行属性添加
      //watch 钩子函数  数组  [父类 子类]

      debugger;
    </script>
  </body>
</html>
